<template>
  <el-select
    ref="customSelect"
    class="el-select-custom"
    popper-class="el-select-custom__popper"
    automatic-dropdown
    :value="value"
    :clearable="clearable"
    :disabled="disabled"
    :placeholder="placeholder"
    @focus="focus"
    @clear="clear">
    <el-option value="0" class="hidden" />
    <div v-if="defaultData.length" class="el-select-custom__inner">
      <filter-form ref="filterForm" :form="listQuery" :data="filterData" only-query @search="search" />
      <el-table
        ref="customSelectTable"
        v-loading="listLoading"
        class="el-select-custom__table"
        :data="data"
        height="400"
        border
        highlight-current-row
        @current-change="currentChange">
        <el-table-column type="index" align="center" width="50" />
        <template v-for="(item, index) in columns">
          <el-table-column
            v-if="item.template"
            :key="index"
            :prop="item.property"
            :label="item.label"
            show-overflow-tooltip
            align="center">
            <template slot-scope="{row}">
              <slot :name="item.property" :row="row" />
            </template>
          </el-table-column>
          <el-table-column
            v-else
            :key="index"
            :prop="item.property"
            :label="item.label"
            :formatter="item.formatter||null"
            show-overflow-tooltip
            align="center" />
        </template>
      </el-table>
      <div class="page-box">
        <pagination
          layout="total, prev, pager, next"
          :total="totalSize"
          :page.sync="listQuery.page"
          :size.sync="listQuery.size"
          @pagination="getListPage" />
      </div>
    </div>
    <div v-else class="el-select-custom__empty">无数据</div>
  </el-select>
</template>
<script>
import { deepClone } from '@/utils'
export default {
  name: 'SelectTable',
  props: {
    value: String,
    clearable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    filterForm: {
      type: Object,
      default() {
        return {}
      }
    },
    filterData: {
      type: Object,
      default() {
        return {}
      }
    },
    // 用defaultData当作初始数据，是为了防止多个此组件在同一页面造成重复请求（如区间战场选择区站，锚段选择起止支柱号）
    defaultData: {
      required: true,
      type: Array,
      default() {
        return []
      }
    },
    columns: {
      required: true,
      type: Array,
      default() {
        return []
      }
    },
    total: {
      type: Number,
      default: 0
    },
    filterFn: Function
  },
  data() {
    return {
      listQuery: {},
      data: [],
      totalSize: 0,
      listLoading: false
    }
  },
  watch: {
    filterForm: {
      handler(val, oldVal) {
        this.listQuery = deepClone(val)
      },
      deep: true
    },
    defaultData: {
      handler(val) {
        this.data = deepClone(val)
      },
      deep: true
    },
    total(val) {
      this.totalSize = val
    }
  },
  created() {
    this.listQuery = deepClone(this.filterForm)
    this.data = deepClone(this.defaultData)
    this.totalSize = this.total
  },
  methods: {
    search() {
      this.listQuery.page = 1
      this.getListPage()
    },
    getListPage() {
      this.listLoading = true
      this.filterFn(this.listQuery)
        .then(response => {
          this.data = response.data.records
          this.totalSize = response.data.total
          this.listLoading = false
        })
        .catch(_ => {
          this.listLoading = false
        })
    },
    focus() {
      this.$emit('focus')
    },
    clear() {
      //  清空单选的选择状态
      this.$refs.customSelectTable && this.$refs.customSelectTable.setCurrentRow()
      this.$emit('clear')
    },
    currentChange(currentRow) {
      if (!currentRow) return
      this.$emit('current-change', currentRow)
      this.$refs.customSelect.blur()
    },
    resetListQuery(key, val) {
      this.$set(this.listQuery, key, val)
    },
    getListQuery(key) {
      return this.listQuery[key]
    }
  }
}
</script>
<style lang="scss">
	.el-select-custom__popper {
		.el-select-dropdown__wrap {
			max-height: 650px;
			.el-select-custom__inner {
				width: 660px;
				padding: 0 10px;
				.el-select-custom__table {
					.el-table__body tr.current-row > td,
					.el-table__body tr.hover-row > td {
						background: #badaef !important;
					}
				}
        .el-select-custom__confirm{
          text-align: center;
        }
			}
      .el-select-custom__empty{
        padding: 4px 0;
        text-align: center;
        color: #999;
        font-size: 14px;
      }
		}
	}
</style>
